<template>
  <div class="volunteer-list">
    <div class="volunteer-item" v-for="item in volunteerlist" :key="item.vno">
     
        <img :src="img" alt="">
        <div class="volunteermess">
                  <span id="vname">{{item.vname}}</span>
                  <span>报名开始时间：{{item.starttime}}</span>
                  <span>招募人数：{{item.headcount}}</span>
                  <span>地点：{{item.vspot}}</span>
              </div>
              <div class="reward">
                  <span id="num">实践小时：{{item.vtime}}</span>
                  <router-link :to="{name:'volunteer_info',params:{vno:item.vno}}">
                  <button>查看详情</button>
                  </router-link>
              </div>
    </div>
   
  </div>
</template>
 
<script>
 
  export default {
  
    data() {
      
      return {
    volunteerlist:[],
    img: require('@/assets/img/登录.jpg')
      }
    },
    created() {
 this.getVolunteerList()
    },
    beforeMount() {
 
    },
    mounted() {
    },
    computed: {},
    methods: {
      getVolunteerList(){
        var url="/api/volunteering/list"
              this.axios.get(url)
                .then(response=>{
                    //response就是请求后返回的数据，response可以任意取名
                    // console.log(response)
                    //通过response获取具体数据，赋值给定义空数组
                    if(response.data.code == 0){
                    this.volunteerlist = response.data.data
                } else {
                    alert(response.data.msg)
                }
                    this.volunteerlist=response.data.data
                    console.log(this.volunteerlist)
                    
                })//请求成功执行then方法
                .catch(error=>{
                    alert(error);
                   
                })//请求失败执行catch方法
          },
    }
  }
</script>
 
<style  scoped>
.volunteer-item{
 padding: 20px 0;
 position: relative;

 border-bottom: 1px solid #e5e5e5;
 font:caption 13px 宋体;
 color:#000000;
}
img{
 width: 130px;
 height: 130px;
 display: inline-block;
 text-align: left;
 border: 2px solid #e5e5e5;
}
.volunteer-item img{
 max-width: 130px;
 max-height:130px;
}

.volunteermess{
 width: 460px;
 height:130px;
 display: inline-block;/* 换为行内块级元素 */
 padding: 0 15px;
 position: relative;

}
.volunteermess span{
 display: block;/* 换为块级元素 */
 padding: 6px 0;
}
#vname{
 font: 450 18px 行楷;
 color: #8c222c;
}
.reward{
 display: inline-block;
 position: relative;
 left: 100px;
}
.reward span{
 display: block;
 padding: 5px 0;

}
#num{
 font: 700 20px 宋体;
 color: #8c222c;
}
.reward button{
 display:block;
 padding: 2px 5px;
 margin-top: 38px;
 border: 1px solid #f55212;
 background-color: #ffffff;
 color: #f55212;
}

</style>
